import React from 'react';
import {View,StyleSheet} from 'react-native';
//flex 属性决定元素在主轴上如何填满可用区域。整个区域会根据每个元素设置的 flex 属性值被分割成多个部分。
//
// 在下面的例子中，在设置了flex: 1的容器 view 中，有红色，黄色和绿色三个子 view。
// 红色 view 设置了flex: 1，黄色 view 设置了flex: 2，绿色 view 设置了flex: 3。1+2+3 = 6，
// 这意味着红色 view 占据整个区域的1/6，黄色 view 占据整个区域的2/6，绿色 view 占据整个区域的3/6。

//Flex
const Flex=()=>{
    return (
        <View style={[styles.container,{
            flexDirection:'row'
        }]}>
            <View style={{
                width:50,
                height:50,
                marginRight:20,
                backgroundColor:'red'}}>

            </View>
            <View style={{
                width:50,
                height:50,
                backgroundColor:'darkorange'}}>

            </View>
            <View style={{
                width:50,
                height:50,
                backgroundColor:'green'}}>

            </View>
        </View>
    );
}

const styles=StyleSheet.create({
    container:{
        flex:1,
        padding:20
    }
});
export default Flex;
